<template>
    <div ref="lhcOptions">
        <!-- 1至49模块 -->
        <div class="flex-box flex-wp opt-pad" v-if="temp == 7">
            <div class="flex-bap wd-14" v-for="(item, i) in content" :key="i">
                <div :id="playType+title[0]+item[0]" class="option-box-cir tx-c-wh" 
                    :class="{
                        [colorCir[item[5]]] : classFil(item) < 0,
                        'bg-c-sel' : classFil(item) > -1,
                        'bg-c-tra' : classFil(item, 1) > -1
                    }" @click="chooseLot(item, odds)">
                    <div class="mar-t-25" :class="{'tx-c-222' : classFil(item) > -1}">{{ item[0] }}</div>
                    <div class="tx-s-12" :class="{'tx-c-r' : classFil(item) > -1}">{{ odds | noOdds($store.state.lotStatus) }}</div>
                </div>
            </div>
        </div>
        <!-- 骰宝模块 -->
        <div class="flex-box flex-wp opt-pad" v-else-if="temp == 3">
            <div class="flex-bap wd-33" v-for="(item, i) in content" :key="i">
                <div :id="playType+title[0]+item[0]" class="flex-f1 option-box" 
                    :class="{
                        'bg-c-wh' : classFil(item) < 0,
                        'bg-c-sel' : classFil(item) > -1
                    }" @click="chooseLot(item, odds)">
                    <div v-if="item[0] == '全骰'">{{ item[0] }}</div>
                    <div v-else class="flex-bap">
                        <div class="icon-15" :class="tbIcon[x]" v-for="(x, i) in item[0].split(', ')" :key="i"></div>
                    </div>
                    <div class="odds">{{ odds[item[1]] | noOdds($store.state.lotStatus) }}</div>
                </div>
            </div>
        </div>
        <!-- 1/2/4/6模块 -->
        <div class="flex-box flex-wp opt-pad" v-else>
            <div :class="{
                'flex-f1' : temp == 1,
                'wd-50' : temp == 2,
                'wd-25' : temp == 4,
                'flex-bap wd-16' : temp == 6
            }" v-for="(item, i) in content" :key="i">
                <div :id="playType+title[0]+item[2]+item[3]" class="option-box" 
                :class="{
                    'option-box' : temp != 6,
                    'option-box-cir' : temp == 6,
                    'bg-c-wh' : classFil(item) < 0,
                    'bg-c-sel' : classFil(item) > -1,
                    'bg-c-tra' : classFil(item, 1) > -1
                }" @click="chooseLot(item, odds)">
                    <!-- 半波添加文字颜色 -->
                    <div v-if="title[0] == 'bb'" class="mar-t-25" :class="{
                        'tx-c-r' : item[3].indexOf('R') > -1,
                        'tx-c-b' : item[3].indexOf('B') > -1,
                        'tx-c-g' : item[3].indexOf('G') > -1
                    }">{{ item[0] }}</div>
                    <div v-else class="mar-t-25">{{ item[0] }}</div>
                    <div class="flex-bap" v-if="numArr.indexOf(title[0]) > -1 || title[0].indexOf('sxl') > -1">
                        <div class="circle-min" 
                            v-for="(num, n) in item[4]" :key="n" :class="[colorCir[c1z49Cont[num-1][5]]]"
                        >{{ num }}</div>
                    </div>
                    <!-- 连码 -->
                    <div class="odds" v-if="typeof odds == 'string'">{{ odds | noOdds($store.state.lotStatus) }}</div>
                    <div class="odds" v-else>{{ odds[item[1]] | noOdds($store.state.lotStatus) }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import 'common/css/lottery.css'
import { choose, chooseTra } from '../../common/js/common'
import { c1z49Cont } from '../../common/js/data'
export default {
    data () {
        return {
            c1z49Cont : c1z49Cont(),
            colorCir : {
                R : 'circle-R', B : 'circle-B', G : 'circle-G'
            },
            numArr : ['tx', 'wx', 'lx_ex', 'lx_sanx', 'lx_sx', 'lx_wux', 'lx_lx', 'yxws_yx', 'yxws_yxbz'],
            tbIcon : {
                '1' : 'yi','2' : 'er','3' : 'san','4' : 'si','5' : 'wu','6' : 'liu'
            }
        }
    },
    props: {
        title : Array,
        odds : [Object, String, Array],
        content : [Object, Array],
        playType : String,
        temp : Number
    }, 
    filters : {
        // 封盘时不显示赔率
        noOdds : function(value, status){
            if(status == 1){
                return value
            }else{
                return '--'
            }
        }
    },
    methods : {
        // 选择彩票玩法
        chooseLot (data, odds) {
            if(typeof odds != 'string') odds = odds[data[1]]
            choose(this.playType, this.title, data, odds)
        },
        classFil (data, type) {
            const { lotOptTra, lotOptions} = this.$store.state
            let id = this.playType+this.title[0] + data[2] + data[3]
            if(type == 1){
                return lotOptTra.indexOf(id)
            }else{
                return lotOptions.indexOf(id)
            }
        }
    }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
.icon-15{
    width : 1.5rem 
    height : 1.5rem
    margin : .5rem .25rem .25rem .25rem
    background-repeat : no-repeat
    background-size : 100% 100%
}
.yi
    background-image : url('../../common/image/1r.png')
.er
    background-image : url('../../common/image/2b.png')
.san
    background-image : url('../../common/image/3b.png')
.si
    background-image : url('../../common/image/4r.png')
.wu
    background-image : url('../../common/image/5b.png')
.liu
    background-image : url('../../common/image/6b.png')
</style>